<!--
 * @Author: 严晗 823841034@qq.com
 * @Date: 2023-10-27 22:31:12
 * @LastEditors: 严晗 823841034@qq.com
 * @LastEditTime: 2024-03-02 11:44:55
 * @FilePath: /yike-admin/Users/yanhan/vite-project/src/components/TablePagin.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 
  * 表格、分页组件
  * 包含表格前的提示信息、按钮信息、按钮事件
  * 表格完全通过配置的参数循环配置
  * 分页会根据elementPlus分页组件来配置
-->
<template>
	<div class="table-pagin">
		<div class="table-btn">
			<div class="table-l">
				<slot name="tableLeft"></slot>
			</div>
			<div class="table-r">
				<slot name="tableRight"></slot>
			</div>
		</div>
		<div class="table-tip">
			<slot name="tableTip"></slot>
		</div>
		<div class="table-data mb-8">
			<!-- 这里根据动态 key 去改变 table布局，不给 key 会无效 -->
			<el-table :data="tableData" ref="tableRef" v-loading="loading" v-if="!trends" :key="Math.random()" style="width: 100%" row-key="id" border size="small" :lazy="isTree" :load="load" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
				<el-table-column type="index" label="序号" width="50" :index="indexMethod" :fixed="indexFixed" v-if="index" />
				<el-table-column v-for="(item, index) in tableHeader" :key="item.prop" :prop="item.prop" :label="item.label" :fixed="item.fixed" :align="item.align || 'center'" :show-overflow-tooltip="item.overHidden || false" :min-width="item.minWidth || '100px'" :sortable="item.sortable || false" :type="item.type" :width="item.width">
					<!-- 插槽：预留功能 -->
					<template #header="scope" v-if="item.slotHeader">
						<!-- 自定义列的头插槽时，可以配置 slotHeader 为 true -->
						<!-- 支持html标签配置 -->
						<span v-html="scope.column.label"></span>
					</template>
					<template #default="scope" v-if="item.slot">
						<!-- 自定义列的内容插槽时，可以配置 slot 为 true -->
						<!-- 
								* 插槽使用方法
								<template v-slot:name="{row}">
									<span>{{ row.name }}</span>
								</template>
							 -->
						<slot :name="item.prop" :row="scope.row"></slot>
					</template>
					<template #default="scope" v-else>
						<span>{{ scope.row[item.prop] || scope.row[item.prop] === 0 ? scope.row[item.prop] : '' }}</span>
					</template>
				</el-table-column>
			</el-table>

			<!-- 这里是动态表格，表头和数据都是通过接口返回数据动态显隐的 -->
			<!-- 动态表格配置参数：trends -->
			<el-table :data="tableData" ref="tableRef" v-loading="loading" v-if="trends" :key="Math.random()" style="width: 100%" row-key="id" border size="small" :lazy="isTree" :load="load" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
				<!-- 动态表格的 tableHeader 参数如下：
					tableHeader: ['表头名称1', '表头名称2'......]
				-->
				<template v-for="(item, index) in tableHeader" :key="item">
					<!-- el-table-column标签全部自定义 -->
					<slot :name="item" :row="scope.row"></slot>
				</template>
			</el-table>
		</div>

		<el-row justify="end">
			<el-pagination v-show="page.total > 0" small @size-change="sizeChange" @current-change="currentChange" v-model:current-page.sync="page.currentPage" :page-sizes="page.pageSizeOptions" v-model:page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="page.total" background> </el-pagination>
		</el-row>
	</div>
</template>

<script setup>
import { ref, watch } from 'vue'

// 配置props
const props = defineProps({
	// 表头
	tableHeader: {
		type: Array,
		default: () => [],
	},
	// 表格数据
	tableData: {
		type: Array,
		default: () => [],
	},
	// 是否开启树形数据
	isTree: {
		type: Boolean,
		default: false,
	},
	// 动态表格（页面上处理好接口参数后，动态显示表头和数据）
	trends: {
		type: Boolean,
		default: false,
	},
	// 是否显示序号
	index: {
		type: Boolean,
		default: true,
	},
	// 序号是否固定在左侧
	indexFixed: {
		type: Boolean,
		default: true,
	},
	// 序号是否自定义（第一行可能是总结，不需要序号）
	indexMethod: {
		type: Boolean,
		default: false,
	},
	// 表格是否加载中
	loading: {
		type: Boolean,
		default: false,
	},
	// 分页信息
	page: {
		type: Object,
		default: () => {
			return {
				pageSize: 10,
				currentPage: 1,
				total: 0,
				pageSizeOptions: [10, 50, 100, 200],
			}
		},
	},
	// 改变每页展示页数
	sizeChange: {
		type: Function,
		default: () => {},
	},
	// 改变页码
	currentChange: {
		type: Function,
		default: () => {},
	},
})

// 懒加载树形数据（测试用）
const load = (row, treeNode, resolve) => {
	setTimeout(() => {
		const list = [
			{
				date: '2016-05-02',
				name: 'John Brown',
				address: 'New York No. 1 Lake Park',
			},
		]
		resolve(list)
	}, 1000)
}

// 自定义序号
const indexMethod = (index) => {
	if (props.indexMethod) {
		if (index === 0) {
			return ''
		}
		return index
	} else {
		return index + 1
	}
}

// 根据表格ref对table进行重新布局
const tableRef = ref(null)
// 需要监听 tableData 的数据变化，变化时调用 doLayout 方法
const layout = () => {
	tableRef.value.doLayout()
}
watch(props.tableData, layout)

// 将方法暴露出去，让父组件可以通过 ref 直接调用
defineExpose({
	layout,
})
</script>

<style lang="scss" scoped>
.table {
	&-data {
		@apply mt-3;

		::v-deep .cell {
			line-height: 20px;
		}
	}
}
</style>
